<template>
  <div>
    <van-row>
      <van-col span="4">
        <van-icon class="left-icon" size="30" @click="toHis" name="down" />
      </van-col>
      <van-col class="center-van-col" span="18">
        <slot>
          <!-- 默认显示 -->
          <!--  -->
          <van-search v-model="searchKey" placeholder="请输入搜索关键词" />
        </slot>
      </van-col>
      <van-col span="2">
        <slot name="right">
          <van-popover
          placement="bottom-end"
           @select="toPage"
            v-model="showPopover"
            theme="dark"
            trigger="click"
            :actions="actions"
          >
            <template #reference>
              <van-icon class="right-icon" size="30" name="ellipsis" />
            </template>
          </van-popover>
        </slot>
      </van-col>
    </van-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchKey: "",
      showPopover: false,
      actions: [{ text: '首页' }, { text: '购物车' }, { text: '个人中心' }],
    };
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（访问DOM元素）
  methods: {
    toHis() {
      this.$router.back(); //后退
    },
    toPage(action,index){
      if(index==0){
        this.$router.push('/index/home')
      }
      if(index==1){
        this.$router.push('/index/shoppingCart')
      }
      if(index==2){
        this.$router.push('/index/personalCenter')
      }
    }
  },
};
</script>
<style scoped lang="less">
@import "../../assets/css/index.less";
.left-icon {
  margin-left: 10px;

  margin-top: 10px;
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}
.right-icon {
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  margin-top: 10px;
}
.center-van-col {
  width: 1000 * @vw;
  height: 220 * @vw;
  text-align: center;
  line-height: 220 * @vw;
}
</style>